<template>
  <div>
    <h2>条件判断指令</h2>
   <!-- 两个条件判断指令 v-show  v-if  -->
   <!-- 
    相同点：都可以控制元素的显示和隐藏
    不同点：当条件为false的时候，
            v-show通过display：none 来让元素隐藏
            v-if 直接把元素移除了，从而让元素隐藏

    如果一个元素，经常切换它的显示隐藏状态，用v-show更好
    如果起始条件是false v-show也会创建元素，让元素隐藏，所以有更高的初始渲染代价
    -->
   <p v-show="flag">v-show</p>
   <p v-if="flag">v-if</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
       flag:true
    }
  }
  
}
</script>

<style>
  div {
    width: 300px;
    height: 300px;
    background-color: pink;
  }
</style>